<!--
 * @页面名称:全文检索
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card fulltextSearch">
    <!-- 搜索模块 -->
    <div class="full-top">
      <el-row type="flex" justify="start" align="middle">
        <el-col :span="12">
          <span class="top-title">全文检索</span>
        </el-col>
        <el-col :span="10" style="display: flex; justify-content: space-around">
          <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start">
            <template #content>
              <span>同义词查询</span>
            </template>
            <el-checkbox v-model="isSynonym" style="padding-right: 10px"></el-checkbox>
          </el-tooltip>
          <el-input v-model="searchString" placeholder="请输入查询内容">
            <template #append>
              <el-button type="primary" @click="onSearch"> 搜索 </el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="full-content">
      <splitpanes :dbl-click-splitter="false" horizontal style="height: 100%">
        <pane>
          <Stable
            style="height: 100%"
            :columns="tableSetting.columns"
            :data="tableSetting.data"
            :tablePage="tableSetting.tablePage"
            :pageSizes="[15, 100, 1000, { label: '全量数据', value: -1 }]"
            @rowClick="rowClick"
            @pageChange="pageChange"
            @rowdblClick="rowdblClick2"
          ></Stable>
        </pane>
        <pane>
          <div style="height: 100%">
            <splitpanes :dbl-click-splitter="false" style="height: 100%">
              <pane>
                <!-- 副表格 -->
                <Stable :columns="tableSetting2.columns" :data="tableSetting2.data" @rowClick="rowClick2"></Stable>
              </pane>
              <pane>
                <!-- 全文表格 -->
                <Stable
                  :columns="tableSetting3.columns"
                  :data="tableSetting3.data"
                  :tableMenu="tableSetting3.tableMenu"
                  @menuClick="menuClick"
                  @rowdblClick="rowdblClick"
                ></Stable>
              </pane>
            </splitpanes>
          </div>
        </pane>
      </splitpanes>
    </div>
    <!-- 全文预览 -->
    <preview
      v-if="fulltextConfig.visible"
      :visible="fulltextConfig.visible"
      :type="fulltextConfig.type"
      :keyword="fulltextConfig.keyword"
      :page="fulltextConfig.page"
      :fileList="fulltextConfig.fileList"
      :download="fulltextConfig.download"
      :print="fulltextConfig.print"
      @updataVisible="updataVisible"
    ></preview>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted, nextTick } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { transTree } from "@/utils/util";
import { useAppStore } from "@/stores/modules/app";
import { previewFulltext } from "@/components/Preview/ts/index";
import Preview from "@/components/Preview/Preview.vue";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import { fileSizeFormat } from "@/utils/formatter";
import ACrypto from "@/utils/crypto";

const { proxy } = useCurrentInstance();
// 获取pinia数据
const appStore = useAppStore();
// 同义词绑定字段
const isSynonym = ref(false);
// 初始化函数
const formatter = ({ row, column, cellValue }: any) => {
  if (column.property === "Title") {
    cellValue = ACrypto.getSS(row[column.property]);
  }
  return cellValue;
};
// 主表格设置
const tableSetting = reactive({
  columns: [
    { title: "文件名", field: "AI_Name", width: 180, sortable: true },
    { title: "类型", field: "AI_Type", width: 100, sortable: true },
    { title: "所在页数", field: "PageIndex", width: 100, sortable: true },
    { title: "文件大小", field: "AI_Size", width: 120, sortable: true, formatter: fileSizeFormat },
    {
      title: "检索内容",
      field: "OCRContents",
      slots: {
        default: ({ row }: any) => {
          return [<span class="col-cont" v-html={showData(row.OCRContents)}></span>];
        }
      }
    }
  ],
  data: [],
  tablePage: {
    showPage: true,
    pageIndex: 1,
    pageSize: 15,
    total: 0
  },
  rowClickObject: {}
});
// 卷内/文件表格设置
const tableSetting2 = reactive({
  columns: [
    { title: "归档方式", field: "FM_OCName", sortable: true },
    { title: "归档号", field: "Code", sortable: true },
    { title: "题名", field: "Title", sortable: true, formatter: formatter },
    { title: "备注", field: "Remark", sortable: true }
  ],
  data: [] as any[],
  rowClickObject: {}
});
// 全文表格设置
const tableSetting3 = reactive({
  columns: [
    { title: "顺序号", field: "AI_Index", sortable: true },
    { title: "文件名称", field: "AI_Name", sortable: true },
    { title: "文件大小", field: "AI_Source_Size", sortable: true, formatter: fileSizeFormat },
    { title: "上传时间", field: "AI_UploadDateTime", sortable: true }
  ],
  data: [],
  tableMenu: {
    enabled: true,
    className: "my-menus",
    body: {
      options: [[{ code: "dataInfo", name: "加入超链接清单", prefixIcon: "DocumentAdd", className: "my-copy-item" }]]
    }
  }
});
// 搜索绑定字段
const searchString = ref("");
// 全文预览配置参数
const fulltextConfig = reactive({
  // 预览全文配置参数
  visible: false,
  fileList: [] as any[],
  type: "",
  download: false,
  print: false,
  keyword: "",
  page: 1
});
// 搜索事件
const onSearch = () => {
  tableSetting2.data = [];
  tableSetting3.data = [];
  tableSetting.rowClickObject = {};
  tableSetting.tablePage.pageIndex = 1;
  // 根据关键字搜索表格数据
  getTableData();
};
// 获取主表数据
const getTableData = () => {
  const { LoadingConfig } = appStore;
  LoadingConfig.contentLoading = true;
  const param = {
    keywords: searchString.value,
    pageIndex: tableSetting.tablePage.pageIndex,
    pageSize: tableSetting.tablePage.pageSize,
    IsSynonym: isSynonym.value
  };
  proxy.$vueAxios.get("MasterBaseSearchOCR/SearchOCRContent", param, { noLoading: true }).then((res: any) => {
    tableSetting.tablePage.total = res.Count;
    tableSetting.data = res.List;
    LoadingConfig.contentLoading = false;
  });
};
// 切换分页
const pageChange = ({ pageIndex, pageSize }: any) => {
  tableSetting.tablePage.pageIndex = pageIndex;
  tableSetting.tablePage.pageSize = pageSize;
  getTableData();
};
// 主表格单击事件
const rowClick = ({ row }: any) => {
  tableSetting2.data = [];
  tableSetting.rowClickObject = row;
  getDynamicData(row).then((res: any) => {
    proxy.$vueAxios.get("Master_Base_FormModel/get", { order: "fM_Index asc" }).then((res2: any) => {
      const tempObj = res2.List.find((v: any) => v.FM_ID === res.FM_ID);
      res.FM_OCName = tempObj.FM_OCName;
      tableSetting2.data.push(res);
    });
  });
};
// 副表格单击事件
const rowClick2 = ({ row }: any) => {
  tableSetting2.rowClickObject = row;
  proxy.$vueAxios
    .post("Master_Base_AllInfos/GetConditional", {
      order: "AI_Index asc",
      dtoList: [{ fieldName: "Record_ID", fieldValue: row.Record_ID }]
    })
    .then((res: any) => {
      tableSetting3.data = res.List;
    });
};
// 根据查询OCR信息去查询目录信息
const getDynamicData = (row: any) => {
  return new Promise((resolve, reject) => {
    proxy.$vueAxios.get("Master_Base_FormModel_Table/Get", { order: "fmT_ID asc" }, { noLoading: true }).then((res: any) => {
      if (res.List && res.List.length > 0) {
        proxy.$vueAxios
          .get("Dynamic/CommonSingleDataGet", { fmtId: row.FMT_ID, Id: row.Record_ID }, { noLoading: true })
          .then((res2: any) => {
            resolve(res2.Model);
          });
      } else {
        resolve([]);
      }
    });
  });
};
// 全文表格双击事件
const rowdblClick = ({ row }: any) => {
  fulltextConfig.keyword = searchString.value;
  fulltextConfig.page = 1;
  previewFulltext(
    {
      id: row.AI_ID,
      fulltextRow: row,
      fulltextTableData: tableSetting3.data,
      config: fulltextConfig,
      IsAllow: true
    },
    proxy
  );
};
const rowdblClick2 = ({ row }: any) => {
  fulltextConfig.keyword = searchString.value;
  fulltextConfig.page = row.PageIndex;
  previewFulltext(
    {
      id: row.AI_ID,
      fulltextRow: row,
      fulltextTableData: tableSetting3.data,
      config: fulltextConfig,
      IsAllow: true
    },
    proxy
  );
};
// 更新预览窗口状态
const updataVisible = (value: boolean) => {
  fulltextConfig.visible = value;
};
// 搜索数据显示高亮
const showData = (val: string) => {
  if (val.indexOf(searchString.value) !== -1 && searchString.value !== "" && val) {
    return val.replace(searchString.value, '<font color="red">' + searchString.value + "</font>");
  } else {
    return val;
  }
};
// 右键点击
const menuClick = ({ menu, row, column }: any) => {
  if (!row) {
    proxy.$message.warning("请选中数据!");
    return;
  }
  if (menu.code === "dataInfo") {
    const id = proxy.$global.createID();
    proxy.$vueAxios
      .post("MasterBaseBorrow/Add", {
        id: id,
        fM_ID: row.FM_ID,
        fmT_ID: row.FMT_ID,
        status: row.Status,
        record_ID: row.Record_ID,
        stdaList: [{ id: proxy.$global.createID(), stD_ID: id }]
      })
      .then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("添加成功!");
          proxy.$vueAxios.get("MasterBaseBorrow/Get").then((res: any) => {
            if (res.Mark) {
              userStore.setFileCount(res.Count);
            }
          });
        }
      });
  }
};
</script>

<style scoped lang="scss">
.fulltextSearch {
  height: 100%;
  .full-top {
    margin-bottom: 5px;
    .top-icon {
      display: flex;
      align-items: center;
      .img {
        font-size: 20px;
        width: 35px;
        height: 35px;
        line-height: 35px;
        color: #fff;
      }
    }
  }
  .full-content {
    height: calc(100% - 37px);
  }
}
</style>
